<template>
  <div class="waybill" v-loading="pageLoading">
    <el-tabs
      class="waybill-status"
      v-model="currentWaybillStatus"
      @tab-change="changeWaybillStatus"
    >
      <el-tab-pane v-for="item in waybillStatus" :key="item.name" v-bind="item"></el-tab-pane>
    </el-tabs>
    <div class="waybill-operate">
      <el-button type="primary" @click="handleCreate">新增</el-button>
    </div>
    <div class="waybill-top-page">
      <p style="margin-right: auto">
        共计 <span style="color: var(--el-color-primary)">{{ query.total }}</span> 条， 已选
        <span style="color: var(--el-color-primary)">{{ selectedRow.length }}</span> 条
      </p>
    </div>
    <div class="waybill-table-container">
      <el-table class="waybill-table" :data="tableData">
        <hs-table-column
          v-for="item in columns"
          :prop="item.prop"
          :key="item.prop"
          :label="item.title"
          v-bind="item"
        />
      </el-table>
    </div>
    <div class="waybill-footer">
      <p style="margin-right: auto">
        共计 <span style="color: var(--el-color-primary)">{{ query.total }}</span> 条
      </p>
      <el-pagination
        v-model:current-page="query.pageNum"
        :page-size="query.pageSize"
        :page-sizes="[20, 50, 100]"
        layout="prev, pager, next, sizes"
        :total="query.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
      />
    </div>
  </div>
</template>

<script setup>
import api from '@/http/index'
import HsTableColumn from '@/components/Table/TableColumn.vue'
import { Waybill_Status_Enum } from '@/common/enum'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const pageLoading = ref(false)
const columns = [
  {
    type: 'selection',
    fixed: 'left',
  },
  {
    prop: 'waybillId',
    title: '运单号',
    width: 200,
  },
  {
    prop: 'sendName',
    title: '发货人',
    width: 120,
  },
  {
    prop: 'sendPhone',
    title: '发货人手机',
    width: 140,
  },
  {
    prop: 'sendDate',
    title: '发货日期',
  },
  {
    prop: 'sendAddress',
    title: '发货地址',
    fieldType: 'address',
  },
  {
    prop: 'receiveName',
    title: '收货人',
    width: 120,
  },
  {
    prop: 'receivePhone',
    title: '收货人手机',
    width: 140,
  },
  {
    prop: 'receiveAddress',
    title: '收货地址',
    fieldType: 'address',
  },
  {
    prop: 'waybillStatus',
    title: '运单状态',
    width: 100,
    fieldType: 'tag',
  },
]
const waybillStatus = [
  {
    label: '全部',
    name: 'all',
  },
  ...Object.keys(Waybill_Status_Enum).map((key) => ({
    label: Waybill_Status_Enum[key].text,
    name: key,
  })),
]
const currentWaybillStatus = ref('all')
const changeWaybillStatus = (status) => {
  currentWaybillStatus.value = status
  if (status === 'all') {
    delete query.waybillStatus
  } else {
    query.waybillStatus = status
  }
  query.pageNum = 1
  getTableData()
}

const selectedRow = ref([])

const handleCreate = () => {
  router.push({ path: 'waybill/create' })
}

const tableData = ref([])

const query = reactive({
  pageNum: 1,
  pageSize: 20,
  totalPage: null,
  total: null,
})
const handleSizeChange = (v) => {
  query.pageSize = v
  query.pageNum = 1
  getTableData()
}
const handleCurrentChange = (v) => {
  query.pageNum = v
  getTableData()
}

const getTableData = () => {
  pageLoading.value = true
  api.waybill
    .list(query)
    .then((result) => {
      tableData.value = (result.data?.list || []).map((item) => ({
        ...item,
        waybillStatus: Waybill_Status_Enum[item.waybillStatus],
      }))
      query.totalPage = result?.data?.totalPage
      query.total = result?.data?.total
    })
    .finally(() => {
      pageLoading.value = false
    })
}

getTableData()
</script>

<style lang="scss">
.waybill {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  &-status {
    .el-tabs__header {
      margin: 0;
    }
    .el-tabs__nav-scroll {
      padding: 0 20px;
    }
    .el-tabs__item {
      height: 47px;
    }
  }
  &-operate {
    padding: 20px 20px 0;
  }
  &-top-page {
    padding: 0 20px;
    margin: 16px 0;
  }
  &-table-container {
    flex: 1;
    padding: 0 20px 20px;
    overflow: hidden;
  }
  &-table {
    height: 100%;
    overflow-y: auto;
    thead {
      color: #262626;
      th {
        font-weight: 500;
      }
    }
  }
  &-footer {
    display: flex;
    align-items: center;
    padding: 20px;
    padding-top: 0;
  }
}
</style>
